<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        Name:
        <p id="name-value"></p>
        <input type="text" name="name" id="name-input" /><br>
        Email:
        <p id="email-value"></p>
        <input type="email" name="email" id="email-input" />
        <input type="submit" />
      </form>

      <script>
            var nameInputEl = document.getElementById("name-input");
            var emailInputEl = document.getElementById("email-input");
            // 监听输入事件，此时 updateValue 函数未定义
            nameInputEl.addEventListener("input", updateNameValue);
            emailInputEl.addEventListener("input", updateEmailValue);
            var nameValueEl = document.getElementById("name-value");
            var emailValueEl = document.getElementById("email-value");
            // 定义 updateValue 函数，用来更新页面内容
            function updateNameValue(e) {
                nameValueEl.innerText = e.srcElement.value;
            }
            function updateEmailValue(e) {
                emailValueEl.innerText = e.srcElement.value;
            }
      </script>
</body>
</html>